// 节流函数
var throttle = function (fn, delay) {
    if (delay === void 0) { delay = 100; }
    var timer = null;
    return function () {
        var _this = this;
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        if (!timer) {
            timer = setTimeout(function () {
                fn.apply(_this, args);
                timer = null;
            }, delay);
        }
    };
};
var container = document.querySelector(".container");
var containerRect = container.getBoundingClientRect();
var containerMiddleX = containerRect.width / 2;
var rightBtn = document.querySelector(".action .right");
var rightBtnRect = rightBtn.getBoundingClientRect();
var rightBtnLeftEdgeXAtContainer = rightBtnRect.left - containerRect.left;
var leftBtn = document.querySelector(".action .left");
var leftBtnRect = leftBtn.getBoundingClientRect();
var leftBtnRightEdgeXAtContainer = leftBtnRect.left + rightBtnRect.width - containerRect.left;
var btnGap = rightBtnLeftEdgeXAtContainer - leftBtnRightEdgeXAtContainer;
var rightEye = document.querySelector(".right__eye");
var rightEyeRect = rightEye.getBoundingClientRect();
var rightEyePosCenter = {
    x: rightEyeRect.left + rightEyeRect.width / 2,
    y: rightEyeRect.top + rightEyeRect.height / 2
};
var leftEye = document.querySelector(".left__eye");
var leftEyeRect = leftEye.getBoundingClientRect();
var leftEyePosCenter = {
    x: leftEyeRect.left + leftEyeRect.width / 2,
    y: leftEyeRect.top + leftEyeRect.height / 2
};
// 眼球移动半径(百分比)
var PUPIL_Move_Radius = 50;
var setAnimationStatus = function (statu) {
    var faceChangeProcess = statu.faceChangeProcess, faceChangeOpacity = statu.faceChangeOpacity, rightEyeX = statu.rightEyeX, rightEyeY = statu.rightEyeY, leftEyeX = statu.leftEyeX, leftEyeY = statu.leftEyeY, mouthTopRadius = statu.mouthTopRadius, mouthBottomRadius = statu.mouthBottomRadius;
    faceChangeProcess && container.style.setProperty("--face-change-process", faceChangeProcess);
    faceChangeOpacity && container.style.setProperty("--face-change-opacity", faceChangeOpacity);
    rightEyeX && container.style.setProperty("--eye-right-x", rightEyeX);
    rightEyeY && container.style.setProperty("--eye-right-y", rightEyeY);
    leftEyeX && container.style.setProperty("--eye-left-x", leftEyeX);
    leftEyeY && container.style.setProperty("--eye-left-y", leftEyeY);
    mouthTopRadius && container.style.setProperty("--mouth-top-radius", mouthTopRadius);
    mouthBottomRadius && container.style.setProperty("--mouth-bottom-radius", mouthBottomRadius);
};
var getAnimationStatus = function (key) {
    var map = {
        faceChangeProcess: "--face-change-process",
        faceChangeOpacity: "--face-change-opacity",
        rightEyeX: "--eye-right-x",
        rightEyeY: "--eye-right-y",
        leftEyeX: "--eye-left-x",
        leftEyeY: "--eye-left-y",
        mouthTopRadius: "--mouth-top-radius",
        mouthBottomRadius: "--mouth-bottom-radius"
    };
    return window.getComputedStyle(container).getPropertyValue(map[key]);
};
var defaultAnimationStatus = {
    faceChangeProcess: getAnimationStatus("faceChangeProcess"),
    faceChangeOpacity: getAnimationStatus("faceChangeOpacity"),
    rightEyeX: getAnimationStatus("rightEyeX"),
    rightEyeY: getAnimationStatus("rightEyeY"),
    leftEyeX: getAnimationStatus("leftEyeX"),
    leftEyeY: getAnimationStatus("leftEyeY"),
    mouthTopRadius: getAnimationStatus("mouthTopRadius"),
    mouthBottomRadius: getAnimationStatus("mouthBottomRadius")
};
var resetAnimationStatus = function () { return setAnimationStatus(defaultAnimationStatus); };
var getMousePosAtContainer = function (e) {
    var clientX = e.clientX, clientY = e.clientY;
    return {
        x: clientX - containerRect.left,
        y: clientY - containerRect.top
    };
};
var getEyeRadian = function (e, eyePos) {
    var dx = e.x - eyePos.x;
    var dy = e.y - eyePos.y;
    var radian = Math.atan2(dy, dx);
    return radian;
};
var faceChangeAnimation = function (e) {
    var x = getMousePosAtContainer(e).x;
    // 方案一：驱动位移实现变脸效果。以中线为分界线，开始变化。
    // if (x < containerMiddleX) return;
    // let faceChangeRange = ((x - containerMiddleX) / (rightBtnLeftEdgeXAtContainer - containerMiddleX));
    // faceChangeRange = faceChangeRange > 1 ? 1 : faceChangeRange;
    // setAnimationStatus({ faceChangeProcess: `${faceChangeRange * 100}%` });
    // 方案二：驱动透明度实现变脸效果。以按钮的间距为度量，开始变化。
    var faceChangeRange = (x - leftBtnRightEdgeXAtContainer) / btnGap;
    var faceChangeOpacity = Math.max(0, Math.min(1, faceChangeRange));
    setAnimationStatus({ faceChangeOpacity: "".concat(faceChangeOpacity.toFixed(2)) });
};
var mouthChangeAnimation = function (e) {
    var x = getMousePosAtContainer(e).x;
    var faceChangeRange = (x - leftBtnRightEdgeXAtContainer) / btnGap;
    var mouthTopRadius = Math.max(10, Math.min(100, faceChangeRange * 100));
    var mouthBottomRadius = Math.max(10, Math.min(100, 100 - faceChangeRange * 100));
    setAnimationStatus({
        mouthTopRadius: "".concat(mouthTopRadius.toFixed(), "px"),
        mouthBottomRadius: "".concat(mouthBottomRadius.toFixed(), "px")
    });
};
var eyeMoveAnimation = function (e) {
    var rightEyeRadian = getEyeRadian(e, rightEyePosCenter);
    var leftEyeRadian = getEyeRadian(e, leftEyePosCenter);
    var rightEyeX = Math.max(25, Math.min(75, PUPIL_Move_Radius + PUPIL_Move_Radius * Math.cos(rightEyeRadian)));
    var rightEyeY = Math.max(25, Math.min(75, PUPIL_Move_Radius + PUPIL_Move_Radius * Math.sin(rightEyeRadian)));
    var leftEyeY = Math.max(25, Math.min(75, PUPIL_Move_Radius + PUPIL_Move_Radius * Math.sin(leftEyeRadian)));
    var leftEyeX = Math.max(25, Math.min(75, PUPIL_Move_Radius + PUPIL_Move_Radius * Math.cos(leftEyeRadian)));
    setAnimationStatus({
        rightEyeX: "".concat(rightEyeX.toFixed(), "%"),
        rightEyeY: "".concat(rightEyeY.toFixed(), "%"),
        leftEyeX: "".concat(leftEyeX.toFixed(), "%"),
        leftEyeY: "".concat(leftEyeY.toFixed(), "%")
    });
};
container === null || container === void 0 ? void 0 : container.addEventListener("mousemove", throttle(function (e) {
    faceChangeAnimation(e);
    mouthChangeAnimation(e);
    eyeMoveAnimation(e);
}, 100));
container === null || container === void 0 ? void 0 : container.addEventListener("mouseleave", throttle(function (e) {
    resetAnimationStatus();
}, 100));
